<template>
    <div class="home">
        <div class="canvas-options">
            <div>
                <el-select v-model="value" placeholder="请选择" size="mini" @change="pipelineTypeChange">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <p class="canvas-add-text">
                    <el-button size="mini" type="primary" @click="svgStateFlayChange">{{ svgStateFlay ? '编辑模式' :
                        '浏览模式' }}</el-button>
                    <span v-show="!svgStateFlay" class="showBtns">
                        <el-button size="mini" :type="addTextStatus ? 'danger' : 'primary'"
                            @click="addText">添加文字</el-button>
                        <el-button size="mini" type="primary" @click="delSvgData">清理</el-button>
                        <el-button size="mini" type="primary" @click="storeData">保存</el-button>
                        <el-button size="mini" type="primary" @click="echoData">回显</el-button>
                    </span>
                </p>
            </div>
            <div v-for="(eq, index) in equipment" :key="eq.eId + index" class="equipment-list"
                @click="equipmentChange(eq, index)" :class="{ 'equipment-list-on': equipmentSelect === index }">
                <div class="equipment-img"><img :class="(addTextStatus || svgStateFlay) ? '' : 'img'" v-show="eq.icon"
                        :src="eq.icon" :alt="eq.name"></div>
                <p class="equipment-name">{{ eq.name }}</p>
            </div>
        </div>

        <canvas id="myCanvas" ref="myCanvas"></canvas>
        <div class="pipeline-info-add">
            <el-dialog :title="modifyType === 1 ? '设备信息' : '文本信息'" :visible.sync="iconDialog" width="750px">
                <div class="icon-form-container">
                    <el-form v-if="modifyType === 1" :model="iconForm" label-position="right" label-width="120px"
                        :inline="true">
                        <el-form-item label="设备名称">
                            <el-input v-model="iconForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="设备编号">
                            <el-input v-model="iconForm.id"></el-input>
                        </el-form-item>
                        <el-form-item label="设备单位">
                            <el-input v-model="iconForm.unit"></el-input>
                        </el-form-item>
                        <el-form-item label="图标缩放比例">
                            <el-input-number v-model="iconForm.scale" :min="10" :max="30"
                                label="值越大，图标越小:10-30"></el-input-number>
                        </el-form-item>
                        <el-form-item label="设备旋转角度">
                            <el-select v-model="iconForm.rotate" placeholder="请选择设备旋转角度">
                                <el-option v-for="(item, index) in rotateOptions" :key="index + 'op'" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="是否展示信息">
                            <el-radio-group v-model="iconForm.show" size="small">
                                <el-radio-button :label="true">展示</el-radio-button>
                                <el-radio-button :label="false">隐藏</el-radio-button>
                            </el-radio-group>
                        </el-form-item>

                        <el-form-item label="描述信息">
                            <div v-for="(item, index) in iconForm.describeList" :key="index">
                                <el-input class="describe" v-model="iconForm.describeList[index]">
                                    <template slot="append">
                                        <el-button icon="el-icon-delete" @click="delDescribe(index)"></el-button>
                                    </template>
                                </el-input>
                            </div>
                            <el-button size="mini" type="primary" @click="addDescribe">新增描述</el-button>
                        </el-form-item>

                    </el-form>
                    <el-form v-else :model="textForm" label-position="right" label-width="100px" :inline="true">
                        <el-form-item label="文本内容">
                            <el-input v-model="textForm.content"></el-input>
                        </el-form-item>
                        <el-form-item label="字体大小">
                            <el-input-number v-model="textForm.contentSize" :min="16" :max="30"></el-input-number>
                        </el-form-item>
                        <el-form-item label="字体颜色">
                            <el-input disabled placeholder="请选择颜色" :value="textForm.contentColor"
                                @click.native="colorInputClick"></el-input>
                            <div class="sketch-picker" v-show="colorStatus">
                                <sketch-picker v-model="color" @input="colorValueChange"></sketch-picker>
                                <el-button size="mini" @click="colorStatus = false">取消</el-button>
                                <el-button size="mini" type="primary" @click="colorStatus = false">确定</el-button>
                            </div>
                        </el-form-item>
                    </el-form>
                    <div style="width: 100%;display: flex;justify-content: space-around;">
                        <el-button @click="iconDialog = false">取消</el-button>
                        <el-button type="primary" @click="iconModify">确定</el-button>
                    </div>
                </div>
            </el-dialog>
        </div>
        <div class="equipment-info-add"></div>
    </div>
</template>

<script>
// import drawPipelineEquipment from '../utils/pipeline'
// import canvasDraw from '../utils/test'
import { json } from 'body-parser'
import canvasDraw from '../utils/draw'
let myCanvas = {}

// setTimeout(() =>  {myCanvas = canvasDraw.init('myCanvas')})
// setTimeout(() =>  {
//     myCanvas = canvasDraw.init('myCanvas')
//     console.log(canvasDraw)
// }, 0)
import { Sketch } from 'vue-color'
export default {
    name: 'Home',
    components: {
        'sketch-picker': Sketch
    },
    data() {
        return {
            options: [{
                value: '0',
                label: '冷水'
            }, {
                value: '1',
                label: '热水'
            }],
            value: '0',
            equipment: [
                {
                    name: '管线',
                    eId: 11,
                    icon: require('../assets/images/line.png'),
                    iconPath: 'line.png',
                    drawType: 0
                },
                {
                    name: '温度表',
                    eId: 1,
                    icon: require('../assets/images/thermometer.png'),
                    iconPath: 'thermometer.png',
                    drawType: 1
                },
                {
                    name: '压力表',
                    eId: 2,
                    icon: require('../assets/images/manometer.png'),
                    iconPath: 'manometer.png',
                    drawType: 1
                },
                {
                    name: '接头',
                    eId: 3,
                    icon: require('../assets/images/joint.png'),
                    iconPath: 'joint.png',
                    drawType: 1
                },
                {
                    name: '直流阀',
                    eId: 4,
                    icon: require('../assets/images/direct_current_valve.png'),
                    iconPath: 'direct_current_valve.png',
                    drawType: 1
                },
                {
                    name: '循环阀',
                    eId: 5,
                    icon: require('../assets/images/circulating_valve.png'),
                    iconPath: 'circulating_valve.png',
                    drawType: 1
                },
                {
                    name: '电动阀',
                    eId: 6,
                    icon: require('../assets/images/electric_valve.png'),
                    iconPath: 'electric_valve.png',
                    drawType: 1
                },
                {
                    name: '开关阀',
                    eId: 7,
                    icon: require('../assets/images/on_off_valve.png'),
                    iconPath: 'on_off_valve.png',
                    drawType: 1
                },
                {
                    name: '热换机',
                    eId: 8,
                    icon: require('../assets/images/heat_exchanger.png'),
                    iconPath: 'heat_exchanger.png',
                    drawType: 1
                },
                {
                    name: '热换机',
                    eId: 9,
                    icon: require('../assets/images/heat_exchanger1.png'),
                    iconPath: 'heat_exchanger1.png',
                    drawType: 1
                },
                {
                    name: '蓄水池',
                    eId: 10,
                    icon: require('../assets/images/reservoir.png'),
                    iconPath: 'reservoir.png',
                    drawType: 1
                },
            ],
            equipmentSelect: 0,
            iconDialog: false,
            iconForm: {
                show: true,

            },
            textForm: {

            },
            rotateOptions: [{
                label: '0 度',
                // value: '0',
                value: 0
            }, {
                label: '90 度',
                // value: '90',
                value: 90,
            }, {
                label: '-90 度',
                // value: '-90',
                value: -90,
            }, {
                label: '180 度',
                // value: '180',
                value: 180,
            }],
            addTextStatus: false,
            modifyType: '', // 1 设备修改 2 文本修改
            color: '',
            colorStatus: false,
            svgStateFlay: false,// false 编辑
            echoDataList: [],//储存临时回显数据
        }
    },
    mounted() {
        myCanvas = canvasDraw.init('myCanvas')
        // myCanvas.addEventListener('mouseup',this.handleMouseup)
        window.addEventListener('click', (e) => {

            // console.log(e)
            // console.log(e.target.id)
            if (e.target.id.includes('equipmentModify')) this.handleMouseup(1)
            if (e.target.id.includes('textModify')) this.handleMouseup(2)
        })

        var home = document.getElementsByClassName("home")[0];
        home.oncontextmenu = function () {
            return false;//屏蔽浏览器自带的右键菜单
        };
    },
    methods: {
        colorInputClick() {
            this.colorStatus = !this.colorStatus
        },
        handleMouseup(e) {
            this.modifyType = e
            let obj = canvasDraw.canvasMouseUp()
            if (e === 1) {
                this.iconForm = JSON.parse(JSON.stringify(obj.info))
            } else if (e === 2) {
                this.textForm = JSON.parse(JSON.stringify(obj.info))
            }

            setTimeout(() => this.iconDialog = true, 0)
            // this.pipelineDialog = true
            // console.log(obj)
        },

        // 设备选择
        equipmentChange(eq, idx) {
            if (this.addTextStatus || this.svgStateFlay) return
            this.equipmentSelect = idx
            this.addTextStatus = false
            canvasDraw.drawTypeChange(eq)
        },

        // 管线类型选择
        pipelineTypeChange() {
            canvasDraw.changePipelineType(this.value)
        },

        // 设备信息修改
        iconModify() {
            if (this.modifyType === 1) {
                if (this.iconForm.describeList.length > 1) {
                    var flay = this.iconForm.describeList.findIndex((value) => {
                        return value === '';
                    })
                    if (flay > -1) {
                        this.$message({
                            message: '请不要添加空信息',
                            type: 'warning'
                        });
                        return
                    }
                }
                canvasDraw.modifyIconInfo(this.iconForm)
            } else {
                canvasDraw.modifyTextInfo(this.textForm)
            }
            this.iconDialog = false
        },
        addText() {
            this.addTextStatus = !this.addTextStatus
            this.equipmentSelect = this.addTextStatus ? -1 : 0
            canvasDraw.drawTypeChange(this.addTextStatus ? 2 : this.equipment[0])
        },
        // 颜色值改变事件处理
        colorValueChange(val) {
            // console.log(val)

            // 取颜色对象的十六进制值
            this.textForm.contentColor = val.hex
        },
        //追加描述信息
        addDescribe() {
            this.iconForm.describeList.push('')
        },
        //删除描述信息
        delDescribe(index) {
            // console.log(index);
            if (this.iconForm.describeList.length == 1) {
                return
            }
            this.iconForm.describeList.splice(index, 1)
        },
        //绘制与浏览切换
        svgStateFlayChange() {
            this.svgStateFlay = !this.svgStateFlay
            this.addTextStatus = false
            this.equipmentSelect = this.svgStateFlay ? -1 : 0
            canvasDraw.drawTypeChange(this.svgStateFlay ? '' : this.equipment[0])
            canvasDraw.svgStateFlayChange(this.svgStateFlay)
        },
        //保存
        storeData() {
            // console.log(JSON.stringify(canvasDraw.storeData()));

            this.echoDataList = canvasDraw.storeData()
        },
        //回显
        echoData() {
            canvasDraw.echoData(this.echoDataList)
            //下方为前后端正式对接所用数据格式
            // canvasDraw.echoData([
            //     {
            //         "startX": 700,
            //         "startY": 126,
            //         "endX": 715,
            //         "endY": 364,
            //         "type": 0,
            //         "proportion": false,
            //         "waterType": 0,
            //         "iconPath": "line.png",
            //         "info": {
            //             "name": "管线",
            //             "unit": "°C",
            //             "id": "",
            //             "scale": 25,
            //             "rotate": 0,
            //             "show": true,
            //             "value": "33",
            //             "content": "",
            //             "contentSize": "",
            //             "contentColor": "",
            //             "describeList": [
            //                 ""
            //             ]
            //         },
            //         "lineID": 1
            //     },
            //     {
            //         "startX": 287,
            //         "startY": 122,
            //         "endX": 428,
            //         "endY": 137,
            //         "type": 0,
            //         "proportion": true,
            //         "waterType": 0,
            //         "iconPath": "line.png",
            //         "info": {
            //             "name": "管线",
            //             "unit": "°C",
            //             "id": "",
            //             "scale": 25,
            //             "rotate": 0,
            //             "show": true,
            //             "value": "33",
            //             "content": "",
            //             "contentSize": "",
            //             "contentColor": "",
            //             "describeList": [
            //                 ""
            //             ]
            //         },
            //         "lineID": 0
            //     },
            //     {
            //         "startX": 469,
            //         "startY": 205,
            //         "endX": 505,
            //         "endY": 259,
            //         "type": 1,
            //         "proportion": false,
            //         "waterType": 0,
            //         "iconPath": "manometer.png",
            //         "info": {
            //             "name": "压力表",
            //             "unit": "°C",
            //             "id": "",
            //             "scale": 25,
            //             "rotate": 0,
            //             "show": true,
            //             "value": "33",
            //             "content": "",
            //             "contentSize": "",
            //             "contentColor": "",
            //             "describeList": [
            //                 ""
            //             ]
            //         }
            //     },
            //     {
            //         "startX": 311,
            //         "startY": 356,
            //         "endX": 347,
            //         "endY": 410,
            //         "type": 1,
            //         "proportion": false,
            //         "waterType": 0,
            //         "iconPath": "manometer.png",
            //         "info": {
            //             "name": "压力表",
            //             "unit": "°C",
            //             "id": "",
            //             "scale": 25,
            //             "rotate": 0,
            //             "show": true,
            //             "value": "33",
            //             "content": "",
            //             "contentSize": "",
            //             "contentColor": "",
            //             "describeList": [
            //                 ""
            //             ]
            //         }
            //     }
            // ])

        },
        //清理
        delSvgData() {
            canvasDraw.delSvgData()
        }
    },
    destroyed() {
        window.removeEventListener('click', this.handleMouseup)
    }
}
</script>

<style scoped lang="less">
.home {
    padding: 5px 50px 0;

    canvas {
        background-color: aquamarine;
        font-family: "Microsoft YaHei";
    }

    .canvas-options {
        max-width: 1400px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 2px 0 6px;

        .equipment-list {

            cursor: pointer;
            /*border: 3px solid #0402dd;*/
            border-radius: 5px;
            padding: 10px 10px 5px 10px;
            /*height: 105px;*/
            /*line-height: 130px;*/
            // height: 90px;

            .equipment-img {
                height: 70px;
                display: flex;
                align-items: center;
                justify-content: center;

                img {
                    /*display: inline-block;*/
                    width: 40px;
                    height: auto;

                }
            }

            .equipment-name {
                margin-top: 6px;
                text-align: center;
            }

            &:hover {

                /*border: 3px solid #ea5e00;*/
                box-sizing: border-box;
                /*transform: scale(1.5);*/
                transition: all 0.3s;

                .img {
                    transform: scale(1.5) translateY(5px);
                    transition: all 0.3s;
                }
            }

            &.equipment-list-on {
                /*transform: scale(1.1);*/
                outline: 3px solid #ea5e00;

                img {

                    /*transition: all 0.3s;*/
                }
            }
        }

        .textValue {
            margin-top: 20px;

            .el-button {
                margin-left: 5px;
            }


        }
    }

    .wenzimiaoshu {
        padding: 5px 5px;
        border: 1px solid red !important;
    }
}

.icon-form-container {
    // text-align: center;

    button {
        width: 35%;
    }
}

.canvas-add-text {
    margin-top: 20px;
    text-align: start;
}

.el-form-item__content {
    position: relative;
}

.sketch-picker {
    height: 420px;
    position: absolute;
    left: 206px;
    top: 0px;
    text-align: center;
}

::v-deep .el-select {
    width: 202px;
}

::v-deep .describe {
    width: 400px;
    margin: 5px 0px;
}

.showBtns {
    margin-left: 10px;
}
</style>
